<template>
  <div class="mod-config">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px">
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品名称" prop="goodsname">
            <el-input
              v-model="dataForm.goodsname"
              maxlength="100"
              show-word-limit
              placeholder="商品名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品类型" prop="goodstype">
            <el-radio-group v-model="dataForm.goodstype" style="width: 50%">
              <el-radio :label="0">实物商品</el-radio>
              <el-radio :label="1">虚拟物品</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品分类" prop="goodscatidpath">
            <el-cascader
              v-model="dataForm.lstGoodscatidpath"
              clearable
              style="width: 100%"
              :options="options"
              :props="props"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="品牌" prop="brandId">
            <el-select v-model="dataForm.brandId" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in brands"
                :key="item.brandid"
                :label="item.brandname"
                :value="item.brandid"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="SEO关键字" prop="goodsseokeywords">
            <el-input v-model="dataForm.goodsseokeywords" placeholder="SEO关键字" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="SEO描述" prop="goodsseodesc">
            <el-input v-model="dataForm.goodsseodesc" placeholder="SEO描述" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品状态" prop="goodsstatus">
            <el-radio-group v-model="dataForm.goodsstatus" style="width: 50%">
              <el-radio :label="0">上架</el-radio>
              <el-radio :label="1">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品属性" prop="attributes">
            <el-checkbox-group v-model="dataForm.attributes" style="width: 100%">
              <el-checkbox label="isrecom">推荐</el-checkbox>
              <el-checkbox label="isbest">精品</el-checkbox>
              <el-checkbox label="isnew">新品</el-checkbox>
              <el-checkbox label="ishot">热销</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="是否包邮" prop="isfreeshipping">
            <el-radio-group v-model="dataForm.isfreeshipping">
              <el-radio :label="1">包邮</el-radio>
              <el-radio :label="2">买家承担运费</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="计价方式" prop="shippingfeetype">
            <el-radio-group v-model="dataForm.shippingfeetype" style="width: 70%">
              <el-radio :label="1">计件</el-radio>
              <el-radio :label="2">重量</el-radio>
              <el-radio :label="3">体积</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="商品描述" prop="goodsdesc">
            <div class="mod-demo-ueditor">
              <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">{{ dataForm.goodsdesc }}</script>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import ueditor from 'ueditor'
import { treeDataTranslate } from '@/utils'
import { getInputValue } from '@/utils/money'
import { isDecimal } from '@/utils/validate'
export default {
  data() {
    // eslint-disable-next-line no-unused-vars
    var isvalidDecimal = (rule, value, callback) => {
      if (!isDecimal(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      ue: null,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      uploadUrl: this.$http.adornUrl(`/system/file/uploadShopGoods`),
      options: [],
      shopCatsOptions: [],
      brands: [],
      // 设置分类
      props: { multiple: false },
      photo: {
        width: '600',
        height: '600',
        shopId: this.$store.state.user.shopId
      },
      dataForm: {
        goodsid: 0,
        goodsname: '',
        goodstype: 0,
        lstGoodscatidpath: [],
        goodscatidpath: '',
        goodscatid: '',
        brandId: '',
        goodsseokeywords: '',
        goodsseodesc: '',
        goodsstatus: '',
        attributes: [],
        isrecom: '',
        isbest: '',
        isnew: '',
        ishot: '',
        isfreeshipping: '',
        shippingfeetype: '',
        goodsdesc: ''
      },
      dataRule: {
        goodsname: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        goodstype: [
          { required: true, message: '货物类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    const _this = this
    _this.ue = ueditor.getEditor(_this.ueId, {
      serverUrl: '', // 服务器统一请求接口路径
      zIndex: 3000
    })
    // 商品目录
    _this.$http({
      url: _this.$http.adornUrl('/goods/shopCats/list'),
      method: 'get',
      params: _this.$http.adornParams({
        'parentId': 0
      })
    }).then(({ data }) => {
      if (data && data.list != null && data.list.length > 0) {
        var lst = []
        for (var i = 0; i < data.list.length; i++) {
          lst.push({
            value: data.list[i].catid,
            parentid: data.list[i].parentid,
            label: data.list[i].catname
          })
        }
        _this.options = treeDataTranslate(lst, 'value', 'parentid')
      }
    })
  },
  methods: {
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 0 && response.file) {
        this.dataForm.goodsimg = response.file.sysFileEncryptionName
        this.dataForm.goodsimgFullPath = this.$http.adornUrl(`/system/file/downloadShopGoods/${response.file.sysFileEncryptionName}`)
      } else {
        this.$message.error(response.msg)
      }
    },
    /** 类别修改，商品的商标也修改 */
    handleChange() {
      const _this = this
      _this.brands = []
      const cats = []
      let val = ''
      if (this.dataForm.lstGoodscatidpath != null && this.dataForm.lstGoodscatidpath.length > 0) {
        for (var j = 0; this.dataForm.lstGoodscatidpath.length > j; j++) {
          if (this.dataForm.lstGoodscatidpath.length - 1 === j) {
            val = val + this.dataForm.lstGoodscatidpath[j]
          } else {
            val = val + this.dataForm.lstGoodscatidpath[j] + '__'
          }
        }
      }
      if (val && val.length > 0) {
        cats.push(val)
      }
      // 品牌目录
      _this.$http({
        url: _this.$http.adornUrl('/goods/brands/list'),
        method: 'post',
        data: _this.$http.adornData({
          'catPath': cats
        })
      }).then(({ data }) => {
        if (data && data.list != null && data.list.length > 0) {
          _this.brands = data.list
        }
      })
    },
    inputMoney(el, name) {
      this.dataForm[name] = getInputValue(el)
    },
    // 表单提交
    dataFormSubmit() {
      return new Promise((resolve, reject) => {
        const _this = this
        _this.dataForm.goodsdesc = _this.ue.getContent()
        if (_this.dataForm.attributes != null && _this.dataForm.attributes.length > 0) {
          for (let i = 0; i < _this.dataForm.attributes.length; i++) {
            _this.dataForm[_this.dataForm.attributes[i]] = 1
          }
        }
        if (_this.dataForm.lstGoodscatidpath != null && _this.dataForm.lstGoodscatidpath.length > 0) {
          for (let j = 0; _this.dataForm.lstGoodscatidpath.length > j; j++) {
            if (_this.dataForm.lstGoodscatidpath.length - 1 === j) {
              _this.dataForm.goodscatid = _this.dataForm.lstGoodscatidpath[j]
              _this.dataForm.goodscatidpath = _this.dataForm.goodscatidpath +
                                            _this.dataForm.lstGoodscatidpath[j]
            } else {
              _this.dataForm.goodscatidpath = _this.dataForm.goodscatidpath +
                                            _this.dataForm.lstGoodscatidpath[j] +
                                            '__'
            }
          }
        }
        _this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            _this.$http({
              url: _this.$http.adornUrl(`/goods/wares/${!_this.dataForm.goodsid ? 'save' : 'update'}`),
              method: 'post',
              data: _this.$http.adornData({
                'goodsid': _this.dataForm.goodsid || undefined,
                'goodsname': _this.dataForm.goodsname,
                'goodstype': _this.dataForm.goodstype,
                'goodscatid': _this.dataForm.goodscatid,
                'goodscatidpath': _this.dataForm.goodscatidpath,
                'brandId': _this.dataForm.brandId,
                'goodsseokeywords': _this.dataForm.goodsseokeywords,
                'goodsseodesc': _this.dataForm.goodsseodesc,
                'goodsstatus': _this.dataForm.goodsstatus,
                'isrecom': _this.dataForm.isrecom,
                'isbest': _this.dataForm.isbest,
                'isnew': _this.dataForm.isnew,
                'ishot': _this.dataForm.ishot,
                'isfreeshipping': _this.dataForm.isfreeshipping,
                'shippingfeetype': _this.dataForm.shippingfeetype,
                'goodsdesc': _this.dataForm.goodsdesc
              })
            }).then(({ data }) => {
              if (data && data.code === 0) {
                _this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                _this.callbackParam = {
                  categoryId: this.dataForm.goodscatidpath
                }
                _this.$emit('saveAfter', _this.callbackParam)
                resolve(true)
              } else {
                _this.$message.error(data.msg)
                resolve(false)
              }
            })
          }
        })
      })
    }
  }
}
</script>
<style>
  .edui-default .edui-toolbar .edui-combox .edui-combox-body {
    height: 20px !important;
  }
  .edui-default .edui-button-body,
  .edui-splitbutton-body,
  .edui-menubutton-body, .edui-combox-body {
    height: 20px !important;
  }
</style>
